<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="css/login.css" />
</head>

<body>
    <div id="login_top">
        <img src="img/xiaologo.png">
        <span>依《网络安全法》相关要求，即日起蘑菇街会员登陆需绑定手机。为保障您的账户安全及正常使用，如您尚未绑定，请尽快完成绑定，感谢您的理解和支持!</span>
    </div>
    <div class="login_bgImg">
        <div id="login_cen">
            <div class="login_wrap">
                <div class="wrap_top">
                    <div class="top_option">
                        <p class="option">
                            账号密码注册
                        </p>
                        <!-- 账号密码注册 -->
                        <div class="login_account">
                            <!-- value="HOUMIN"   value="666666" -->
                            <input type="text" placeholder="账号/邮箱/手机号" id="option_account" />
                            <span class="account_span">lall</span>
                            <input type="text" placeholder="请输入密码" id="option_password" />
                            <span class="password_span">kakk</span>
                            <input type="password" placeholder="确认密码" id="verify_password" />
                            <span class="verify_span">rtrtt</span>
                            <button type="button" id="btnLogin">注册</button>
                            <span class="login_span">gfdg</span>
                            <a href="#">手机号注册</a>
                        </div>

                        <!-- 手机号登录 -->
                        <!-- <div class="option_phone">
                            <input type="text" placeholder="手机号" />
                            <div class="phone_verify">
                                <input type="text" placeholder="验证码" />
                                <span>获取动态密码</span>
                            </div>
                            <button type="button">登录</button>
                            <a href="#">账号密码登录</a> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div id="login_bottom">
        <ol class="login_nav">
            <li>关于我们</li>
            <li>招聘信息</li>
            <li>联系我们</li>
            <li>商家入驻</li>
            <li>商家后台</li>
            <li>规划中心</li>
            <li>规划众议院</li>
            <li>有坏信息举报</li>
            <li>用户隐私保护</li>
        </ol>
        <div class="login_below">
            <p class="login_below_one">
                <span>©2020 Mogu.com 杭州卷瓜网络有限公司</span>
            </p>
            <ul class="login_below_two">
                <li>营业执照：93478347836523829</li>
                <li>营业性演出许可证</li>
                <li>网络文化经济许可证</li>
                <li>网络信息服务信用承诺书</li>
                <li>进口冷链食品管理承诺书</li>
                <li>增值电信业务经营许可证：浙B2-20110349</li>
                <li>安全责任书</li>
            </ul>
            <ul class="login_below_three">
                <li>
                    <img src="img/12.png" alt=""> 浙公网安备 34638643856号
                </li>
                <li>互联网药品信息服务资格证书编号：（浙）- 经营性-2018-0002</li>
                <li>浙网食A34565780</li>
                <li>出版物网络交易平台服务经营备案证</li>
                <li>（浙）网城平台备字【2018】第00006号</li>
            </ul>
        </div>
</body>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    let arr = [0, 0, 0];

    // 验证用户名格式和是否存在
    $("#option_account").keyup(function() {
        // 汉字两个到十个或者英文首字母大写再至少三个小写字母组成
        // /^([\u4e00-\u9fa5]{2,10})|([A-Z]{1}[a-z]{3,})$/
        // 手机号：15  13  18 开头的11数字
        // /^1[358]\d{9}$/
        // 一段数字或字母包含下划线@一段数字或字母.字母
        // /^\w{1,}@{1}[0-9A-z]+\.[A-z]{2,}$/
        if (this.value == "") {
            this.style.borderColor = "#dccac8";
            return;
        }
        // 1、前端验证（格式是否正确）
        let regObj = /^([(\u4e00-\u9fa5)A-Za-z]{2,10}|(1[358]\d{9})|(\w{1,}@{1}[0-9A-z]+\.[A-z]{2,}))$/;
        if (!regObj.test(this.value)) {
            console.log(this.value)
            let Aita = (this.value).indexOf("@");
            if (Aita = /^\d/ && Aita != -1) {
                $(".account_span").html("请输入正确的邮箱格式").css({
                    "color": "#ff4562",
                    "font-size": "10px",
                    "display": "block",
                });
                arr[0] = 0;
            } else {
                $(".account_span").html("请输入正确的手机号码").css({
                    "color": "#ff4562",
                    "font-size": "10px",
                    "display": "block",
                });
                arr[0] = 0;
            }
        } else {

            // 2、后端验证（存在性验证）
            $.ajax({
                url: "Lphp/checkuser.php",
                type: "POST",
                data: {
                    "username": $("#option_account").val()
                },
                success(data) {
                    if (data == 1) {
                        $(".account_span").html("亲，不好意思，该用户名被人用了").css({
                            "color": "#ff4562",
                            "display": "block",
                        });
                        arr[0] = 0;
                    } else {
                        $("#option_account").css({
                            "border": "1px solid green"
                        });
                        arr[0] = 1;
                    }
                },
            });
        }
    });

    // 验证密码格式是否正确
    $("#option_password").blur(function() {
        if (this.value == "") {
            this.style.borderColor = "#dccac8";
            return;
        }
        let regObj = /^\d{6}$/;
        if (!regObj.test(this.value)) {
            $(".password_span").html("密码的格式不合法，请输入6位数字").css({
                "color": "#ff4562",
                "display": "block",
            });
            arr[1] = 0;
        } else {
            $("#option_password").css({
                "border": "1px solid green"
            });
            arr[1] = 1;
            checkPass();
        }
    });

    function checkPass() {
        if ($("#verify_password").val() != $("#option_password").val()) {
            $(".verify_span").html("两次密码不一致").css({
                "color": "#ff4562",
                "display": "block",
            });
            arr[2] = 0;
        } else {
            $("#verify_password").css({
                "border": "1px solid green",
            });
            $(".verify_span").html("两次密码不一致").css({
                "display": "none",
            });
            arr[2] = 1;
        }
    }

    // 验证确认密码是否一样
    $("#verify_password").keyup(function() {
        checkPass();
    });

    $("#btnLogin").click(function() {
        // 1、判断所有的前端验证没有问题
        // every函数：判断数据中的每个元素是否满足条件（回调函数写的条件）
        if (!arr.every(item => item == 1)) {
            $(".login_span").html("请仔细检查每一项是否正确").css({
                "color": "#ff4562",
                "display": "block",
            });
        } else {
            // 2、发送请求（注册）
            $.post(
                "Lphp/addUser.php", {
                    "username": $("#option_account").val(),
                    "userpass": $("#option_password").val()
                },
                function(data) {
                    console.log(data)
                    if (data == "success") {
                        location.href = "http://127.0.0.1/project/Mogujie/logon.html"
                    } else {
                        $(".login_span").html("注册失败！").css({
                            "color": "#ff4562",
                            "display": "block",
                        });
                    }
                }
            );
        }
    });
</script>

</html>